<template>
  <div>
    <!--   标题   -->
    <IndexTitle/>
    <div class="content">
      <!--      nav-->
      <div class="nav">
        <ul>
          <li class="nav-li">
            <a>首页</a>
          </li>
          <li class="nav-li">
            课程分类<i class="el-icon-arrow-down"></i>
            <ul class="none">
              <li v-for="(i,index) in projectList" :key="index" @click=goSeach(i.subjectId)>
                {{ i.title }}
              </li>
            </ul>
          </li>
          <li class="nav-li">专属课程</li>
        </ul>
      </div>
    </div>
    <!--   轮播图   -->
    <SlideShow/>
    <!--   直播   -->
    <div class="content">
      <Live/>
      <!--      免费课程-->
      <Classes :type="free" :title="freeTitle"/>
      <!--      精品课程-->
      <Classes :type="boutique" :title="boutiqueTitle" :pageSize="pageSize"/>
      <!--      折扣课程-->
      <Classes :type="discount" :title="discountTitle" :pageSize="pageSize"/>

      <Article :title="Article"/>
    </div>
    <Friend/>
  </div>
</template>

<script>

// import {getIndex} from "@/api/index-api";
import SlideShow from "@/views/Index/components/SlideShow";
import Classes from "@/views/Index/components/Classes";
import Live from "@/views/Index/components/Live";
import Friend from "@/components/Friend";
import IndexTitle from "@/components/IndexTitle";
import {postprojectList} from "@/api/index-api";
import Article from "@/views/Index/components/Article";

export default {
  name: "IndexPage",
  data() {
    return {
      activeName: 'first',
      value: '课程选择',
      free: "free",
      freeTitle: "免费课程",
      boutique: "boutique",
      boutiqueTitle: "精品课程",
      discount: "discount",
      discountTitle: "限时折扣课程",
      Article:"头条精选",
      pageSize:"5",
      projectList:''
    }
  },
  components: {
    SlideShow,
    Live,
    Classes,
    Friend,
    IndexTitle,
    Article
  },
  created() {
    postprojectList().then(res=>{
      this.projectList=res.rows
    })
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    goSeach(e){
      this.$router.push({
        path: '/SearchPage',
        query: {
          subjectId: e.toString(),
          type: '',
          courseType: ''
        }
      })
    }
  }
}
</script>
<style lang="less">
.el-tabs__item.is-active {
  color: #00cf8c;
}

.el-tabs__item:hover {
  color: #00cf8c;
}

.el-tabs__active-bar {
  background-color: #00cf8c;
}
</style>

<style lang="less" scoped>
.content {
  width: 1200px;
  margin: 0 auto;

  .Nav {
    display: flex;

    .select {
      width: 200px;
      padding: 0 20px;
      height: 40px;
      box-sizing: border-box;
      line-height: 40px;
      display: inline-block;
      list-style: none;
      font-size: 14px;
      font-weight: 500;
      color: #303133;
      position: relative;
      border: none;
      outline: none;
    }

    .Exclusive {
      width: 100px;
    }

    .select:hover,
    .Exclusive:hover {
      color: #00cf8c;
    }
  }
}

.nav {

  ul {
    overflow: hidden;
    list-style: none;
    padding: 0;
    margin: 0;
    margin-top: 20px;

    li.nav-li {
      float: left;
      font-size: 16px;
      margin-right: 20px;
      padding-bottom: 5px;
      //position: relative;
      .none {
        display: none;
        position: absolute;
        top: 100px;
        left: 210px;
        background-color: #ffffff;
        box-shadow: 0px 0px 0px 1px #dddddd;
        z-index: 11;
        width: 130px;
        li {
          width: 130px;
          font-size: 14px;
          color: #999;
          margin: 0;
          padding: 4px 10px;
          float: none;

        }

        li:hover {
          background-color: #e6fff3;
          color: #1da57a;
        }
      }
    }

    li.nav-li:nth-of-type(1) {
      color: #00cf8c;
      border-bottom: 2px solid #00cf8c;
    }

    li:nth-of-type(2):hover {
      .none {
        display: block;
      }
    }

    .nav-li:hover {
      color: #1da57a;
    }
  }
}
</style>